<template>
  <div
    class="logo"
    :class="`size-${size} ${multLine ? 'mult-line' : ''}`"
  >
    <span class="text">BlockJoker</span>
    <span class="sub">Love <span class="btc">BTC</span> & <span class="r">R</span><span class="g">G</span><span class="b">B</span></span>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
defineProps({
  size: {
    type: String,
    default: ''
  },
  multLine: {
    type: Boolean,
    default: false
  }
})
</script>

<style lang="less" scoped>
.logo {
  width: 510px;
  .text {
    color: #0f0;
    font-size: 50px;
    font-weight: bold;
    font-style: italic;
  }
  &.size-small {
    .text {
      font-size: 34px;
    }
  }
  .sub {
    padding: 0 0 0 10px;
    color: #0f0;
    font-style: italic;
    font-size: 17px;
    font-weight: bold;
    .btc {
      color: #FDA601;
    }
    .r, .g, .b {
      font-size: 17px;
      font-weight: bold;
    }
    .r {
      color: #EF1F1F;
    }
    .g {
      color: #2ECF6D;
    }
    .b {
      color: #1287E0;
    }
  }
}

@media (max-width: 900px) {
  .logo {
    padding: 0 0 0 10px;

    .text {
      font-size: 18px !important;
    }
    .sub {
      font-size: 12px;
      .r, .g, .b {
        font-size: 12px;
      }
    }

    &.mult-line {
      .text {
        display: block;
      }
      .sub {
        display: block;
        padding: 0;
      }
    }
  }
}
</style>